<template>
	<view class="search-box" @click="goSearch">
		<u-search :placeholder="data.placeholder"
		 :disabled="true" :show-action="false"
		v-model="keyword"></u-search>
	</view>
</template>

<script>
	export default {
		name: "diy-page-type15",
		components:{
			
		},
		props: {
			// DIY页面类型
			typeId: {
				type: Number,
				default: 0
			},
			//页面数据
			data: {
				type: Object,
				default: () => {
					return {}
				}
			},
		},
		data() {
			return {
				keyword: '',
				keywordLock: false,
				keywordIndex: 0,
				keywords: [],
			};
		},
		watch: {

		},
		computed: {

		},
		mounted(){
			this.keywords = this.data.keywords.map(item => { return item.keyword })
		},
		methods: {
			handleShow(){
				this.keywordLock = false
				this.loopKeywordList()
			},
			handleHide(){
				this.keywordLock = true
			},
			goSearch(e){
				// console.log(e)
				this.$myRouter.push({name:'goods/search'})
			},
			loopKeywordList(){
				if (this.keywordLock){
					return
				}
				// 如果关键词没有，退出
				if (this.keywords.length < 1){
					return
				}
				this.keyword = this.keywords[this.keywordIndex]
				// 如果关键词 = 1，退出
				if (this.keywords.length < 2){
					return
				}
				if (this.keywords.length > (this.keywordIndex+1)){
					this.keywordIndex = this.keywordIndex+1
				}
				else {
					this.keywordIndex = 0
				}
				console.log(this.keywordIndex)
				setTimeout(this.loopKeywordList, 3000);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.search-box{
		padding: 10rpx;
		border-bottom: 1px solid #f5f5f5;
		background-color: #FFF;
		z-index: 999;
	}
</style>
